<template>
<div class="home">
    
	 <leftnavs @sent-listnum="getlistnum"></leftnavs>
	<div class="right" :style="{ transform: `translateX(${moveX}px)`}">
		<div class="righttop">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">当前位置</el-breadcrumb-item>
				<el-breadcrumb-item>首页</el-breadcrumb-item>
				
			</el-breadcrumb>
			<div class="top-rightbox">
				<div>
					<img src="../assets/topone.svg" alt="">
					<span>提醒</span>
				</div>
				<div>
					<img src="../assets/toptwo.svg" alt="">
					<span>帮助</span>
				</div>
			</div>
		</div>
		<div class="rightbot">
			<div class="botonebox">
				<div class="onebox-one">
					<div class="numtop">
						<img src="../assets/botone.png" alt="">
						<span>456.00</span>
					</div>
					<div class="numbot">
						<span>今日销售额</span>
					</div>
				</div>
				<div class="onebox-two">
					<div class="numtop">
						<img src="../assets/bottwo.png" alt="">
						<span>456</span>
					</div>
					<div class="numbot">
						<span>今日订单数</span>
					</div>
				</div>
				<div class="onebox-three">
					<div class="numtop">
						<img src="../assets/botthree.png" alt="">
						<span>456</span>
					</div>
					<div class="numbot">
						<span>出售商品数</span>
					</div>
				</div>
				<div class="onebox-four">
					<div class="numtop">
						<img src="../assets/botfour.png" alt="">
						<span>456</span>
					</div>
					<div class="numbot">
						<span>总买家数</span>
					</div>
				</div>
			</div>
		</div>
		<div class="rightmid">
			<div class="midleft">
				<div class="myorder">	
					<div class="ordertop">
						<span>我的订单</span>
					</div>
					<div class="orderbot">
						<div class="order">
							<img src="../assets/orderone.png" alt="">
							<p>待发货</p>
							<p>1057</p>
						</div>
						<div class="order">
							<img src="../assets/ordertwo.png" alt="">
							<p>待收货</p>
							<p>1057</p>
						</div>
						<div class="order">
							<img src="../assets/orderthree.png" alt="">
							<p>售后中</p>
							<p>1057</p>
						</div>
						<div class="order">
							<img src="../assets/orderfour.png" alt="">
							<p>全部订单</p>
							<p>1057</p>
						</div>
					</div>
				</div>
				<div class="menu">
					<div class="ordertop">
						<span>常用菜单</span>
					</div>
					<div class="menubot">
						<div class="menubox">
							<div class="bgcolor">
								<img src="../assets/botthree.png" alt="">
							</div>
							<p>新增商品</p>
						</div>
						<div class="menubox">
							<div class="bgcolor1">
								<img src="../assets/botthree.png" alt="">
							</div>
							<p>发布商品</p>
						</div>
						<div class="menubox">
							<div class="bgcolor1">
								<img src="../assets/botthree.png" alt="">
							</div>
							<p>应收款融资</p>
						</div>
					</div>
					
				</div>
			</div>
			<div class="midright">
				<div class="ordertop">
					<span>待补货商品</span>
				</div>
				<Small></Small>
			</div>
		</div>
		<div class="botline">
			<div class="ordertop">
				<span>销售额统计</span>
			</div>
			<div class="bigline" ref="chart"></div>
		</div>
	</div>
	
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Small from '@/components/Small.vue'

import * as echarts from 'echarts'
import Leftnavs from '../components/Leftnavs.vue'
export default {
  name: 'HomeView',
  
  components: {
    HelloWorld,
	Small,
	Leftnavs
  },
  data(){
	return{
		chart:null,
		listnum:0
	}
  },
  methods:{
	getlistnum(i){
            this.listnum=i
            console.log(this.listnum);
        },
        dellistnum(){
            this.listnum=0
        },
        gonext(data){
            if(this.$route.name!=data){
				this.$router.push({name:data})
			}else{
				console.log('出错了');
				
			}
        },
		rehome(){
			if(this.$route.name!='home'){
				this.$router.push({name:'home'})
				
			}else{
				console.log('已经在主页了');
				
			}
  		},
  },
  computed: {
    moveX() {
      return this.listnum >= 1 ? 115 : 0;
    },
  },
  mounted(){
	const options = {
	xAxis: {
		type: 'category',
		data: ['3-12', '3-19', '3-26', '4-3', '4-10', '4-17', '4-24']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
		data: [2050, 1500, 3060, 2000, 4200,3299,2600,],
		type: 'line'
		}
	]
	};
	// 初始化 ECharts 实例
    this.chart = echarts.init(this.$refs.chart);
    // 使用配置项生成图表
    this.chart.setOption(options);
  },
  beforeDestroy(){
	if(this.chart){
		this.chart.dispose()
	}
  }

}
</script>
<style scoped>
*{
	padding: 0;
	margin: 0;
}
li{
	cursor: pointer;
}
.left{
	height: auto;
	width: 101px;
	background-color: rgb(0, 21, 41);	
}
ul{
	list-style: none;
	
}
.myphoto img{
    width: 48px;
    height: 48px;
	border-radius: 50%;
}
.myphoto{
	padding: 18px;
}
li img{
	height: 18px;
	margin-left: 13px;
	width: auto;
}
.right{
	transition:  all .8s;
}
.othersvg{
	width: 18px !important;
	height: auto;
}
li{
	display: flex;
	align-items: center;
	height: 44px;
}

li span{
	display: block;
	float: right;
	margin-left: 20px;
	font-size: 13px;
	color: rgb(228, 228, 228);
	font-weight: 400;
}
.morewith{
	padding-right: 2.5px;
	padding-left: 2.5px;
}
.righttop{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1260px;
    height: 36px;
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
}
.home{
	display: flex;
	margin: 0 auto;
	width: 1360px;
	margin: 0 auto;
}
.el-breadcrumb{
	margin-left: 10px;
}
.top-rightbox{
	color: #555;
	display: flex;
	align-items: center;
}
.top-rightbox div{
	font-size: 14px;
	margin-right: 15px;
	color: #555;
	display: flex;
	align-items: center;
}
.top-rightbox div img{
	margin-right: 5px;
}
.botonebox{
	display: flex;
}
.onebox-one{
	width: 294px;
    height: 93px;
    background: inherit;
    background-color: rgba(23, 213, 126, 1);
    border: none;
    border-radius: 0px;
}
.onebox-two{
	width: 294px;
    height: 93px;
    background: inherit;
    background-color: rgba(254, 201, 43, 1);
    border: none;
    border-radius: 0px;
	margin-left: 17px;
}
.onebox-three{
	width: 294px;
    height: 93px;
    background: inherit;
    background-color: rgba(45, 163, 251, 1);
    border: none;
    border-radius: 0px;
	margin-left: 17px;
}
.onebox-four{
	width: 294px;
    height: 93px;
    background: inherit;
    background-color: rgba(193, 114, 216, 1);
    border: none;
    border-radius: 0px;
	margin-left: 17px;
}
.rightbot{
	margin-top: 38px;
	margin-left: 35px;
}
.numtop{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	margin-left: 10px;
}
.numtop img{
	height: 30px;
	width: auto;
}
.numtop span{
	font-size: 18px;
	font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
	margin-right: 15px;
}
.numbot{
	margin-top: 20px;
	display: flex;
	justify-content: end;
}
.numbot span{
	margin-right: 15px;
	font-size: 14px;
	color: #fff;
}
.midleft{
	width: 605px;
	height: 194px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
}
.rightmid{
	margin-top: 18px;
    margin-left: 35px;
}
.ordertop{
	display: flex;
	align-items: center;
	justify-content: start;
	height: 45px;
	border-bottom: 1.5px solid #cfcfcf;
}
.ordertop span{
	font-size: 14px;
	color: #333;
	margin-left: 10px;
}
.orderbot{
	display: flex;
	justify-content: space-between;
}
.order{
	width: 130px;
}
.order img{
	margin-top: 25px;
	margin-bottom: 10px;
}
.order p{

	margin-bottom: 12px;
}
.menu{
	width: 605px;
    height: 217px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
	margin-top: 40px;
}
.bgcolor{
	width: 70px;
    height: 70px;
    background: inherit;
    background-color: rgba(255, 190, 96, 1);
    border: none;
    border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bgcolor1{
	width: 70px;
    height: 70px;
    background: inherit;
	background-color: rgba(85, 222, 159, 1);
    border: none;
    border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.menubot{
	display: flex;	
	align-items: center;
	padding-left: 20px
}
.menubox{
	color: #333;
	font-size: 13px;
	margin-right: 45px;
	margin-top: 25px;
}
.menubox p{
	color: #333;
	font-size: 13px;
	margin-top: 10px;
}
.midright{
	width: 605px;
    height: 426px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
	margin-left: 17px;
}
.rightmid{
	display: flex;
}
.bigline{
	width: 1227px;
	height: 380px;
}
.botline{
	width: 1227px;
    height: 429px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
	margin-left: 35px;
	margin-top: 20px;
}
.classify{
	z-index: 99;
	position: absolute;
	left: 142px;
	top: 0;
	width: 114px;
    height: 823px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
}
.shopreturn img{
	margin-left: 20px;
}
.shopreturn{
	height: 38px;
	line-height: 38px;
	border-bottom:1.5px solid #cfcfcf;
	font-size: 13px;
} 
.shopul li{
	padding-left: 19px;
	font-size: 13px;
}
.shopul{
	margin-top: 5px;
}
</style>